<template>
	<view class="singer-page">
		<!-- #ifndef MP-WEIXIN -->
		<myuni-topbar class="topbar">
		  <template v-slot:title>
			<text></text>
		  </template>
		</myuni-topbar>
		<!-- #endif -->
		<view ref="scroll_box" v-if="singerInfo" class="singer-container singer-cover" :style="{background:singerCover}">
			<view class="content">
				<view class="singer-top-info">
					<text class="name">{{singerInfo.artist.name}}</text>
					<text class="fans">44125<em>粉丝</em></text>
					<view class="like" @click="like=!like">
						<text v-if="like"> + 关注</text>
						<text v-else> v 关注</text>
					</view>
				</view>
				<view class="info-tab">
					<myuni-tab ref="scroll_tab" class="tab-title" :title="titleData" @tabChange="tabChanged">
						<view class="info-content">
							<view v-if="currentTabIndex===0" class="">
								<view class="detail-info-card">
									<view class="title">艺人百科</view>
									<view class="singer-type" v-for="(item,index) in singerInfo.artist.identifyTag" :key="index">{{item}}</view>
									<view class="lable">艺人名:<text>{{singerInfo.artist.name}}</text></view>
									<view class="lable">身份:<text v-for="item in singerInfo.secondaryExpertIdentiy" :key="item.expertIdentiyId">{{item.expertIdentiyName}}</text></view>
									<view class="lable">性别:<text>{{singerInfo.user.gender===2?"女":"男"}}</text></view>
									<view class="lable">个人简介:<text class="desc">{{singerInfo.artist.briefDesc}}</text></view>
								</view>
							</view>
							<view v-else-if="currentTabIndex===1" class="">
								<view class="main-list">
									<uni-list class="list">
									    <uni-list-item v-for="(item,index) in songs" :key="item.id" :title="item.name" :note="item.al.name" @click.native="getSong(item)">
											 <template slot="footer">
												 <view class="control">
												 	<i class="has-mv iconfont icon-bg-play"></i>
												 	<i class="detail iconfont icon-gedan"></i>
												 </view>
											 </template>
									    </uni-list-item>
									</uni-list>
								</view>
							</view>
							<view v-else="currentTabIndex===2" class="">
								<view class="albums-list">
									<view class="albums-item" v-for="item in albums" :key="item.id">
										<image :src="item.picUrl" :lazy-load="true" mode="widthFix"></image>
										<view class="right-info">
											<text class="name">{{item.name}}</text>
											<text class="time">{{item.publishTime | dateFormat}}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</myuni-tab>
				</view>
			</view>
		</view>
		<myuni-player class="myplayer" :currntSong="currntSong" @emitChangeSong="ChangeSong"></myuni-player>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				singerId:null,
				singerInfo:null,
				singerCover:null,
				titleData:['主页','歌曲','专辑'],
				currentTabIndex:0,
				currntSong:null,
				like:false,
				songs:null,
				albums:null
			}
		},
		onLoad(option) {
			this.singerId=option.singerId
			this.getSingerInfo(option.singerId)
			if(uni.getStorageSync('music').url){
				console.log('本地有音乐')
				var music = uni.getStorageSync('music')
				this.currntSong = music
			}
		},
		methods: {
			getSingerInfo(singerId){
				this.request({
					url:'/artist/detail?id='+singerId
				}).then(res=>{
					console.log(res)
					this.singerInfo=res.data
					this.singerCover= `url(${this.singerInfo.artist.cover}) no-repeat top left`
				})
			},
			getSongs(singerId){
				this.request({
					url:'/artists?id='+singerId
				}).then(res=>{
					this.songs=res.hotSongs
				})
			},
			getSingerMv(singerId){
				this.request({
					url:'/artist/mv?id='+singerId
				}).then(res=>{
					console.log(res)
				})
			},
			getAlbum(singerId){
				this.request({
					url:'/artist/album?id='+singerId
				}).then(res=>{
					this.albums=res.hotAlbums
				})
			},
			tabChanged(val){
				this.currentTabIndex=val.index
				if(!this.songs&&val.index===1){
					this.getSongs(this.singerId)
				}
				else if(!this.albums&&val.index===2){
					this.getAlbum(this.singerId)
				}
			},
			ChangeSong(isNext){
				let playlist=uni.getStorageSync('playlist')
				if(isNext){
					var index
					this.currntSong.index===playlist.length-1?index=0:index=this.currntSong.index+1
				}else{
					var index
					this.currntSong.index===0?index=playlist.length-1:index=this.currntSong.index-1
				}
				playlist[index].index=index
				this.getSong(playlist[index])
			},
			getSong(item){
				const {picUrl,name}=item.al
				const {name:singer,id:singerId}=item.ar
				this.request({
					url:'/song/url?id='+item.id
				}).then(res=>{
					uni.setStorageSync('music',{id:res.data[0].id,picUrl,name,singer,singerId,url:res.data[0].url,playing:true,index:item.index,single:this.single,type:'playlist'})
					this.currntSong = uni.getStorageSync('music')
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
.singer-page{
	::v-deep.topbar{
		background-color: unset;
	}
	.singer-container{
		box-sizing: border-box;
        position: relative;
		padding-top: 560rpx;
		width: 100%;
		height: 100vh;
		overflow: hidden;
		overflow-y: scroll;
		background-size: 100% !important;
		transition: all 1s ease;
		.content{
			padding-bottom: 100rpx;
			position: sticky;
			position: -webkit-sticky;
			top: 0;
			background-color: #111115;
			border-top-left-radius: 40rpx;
			border-top-right-radius: 40rpx;
			.singer-top-info{
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				.name{
					padding-top: 20rpx;
					color: $uni-text-color-grey;
					font-weight: 800;
				}
				.fans{
					padding: 20rpx;
					color: #fff;
					font-size: 24rpx;
					i{
						color: $uni-text-color-grey;
					}
				}
				.like{
					padding: 10rpx 40rpx;
					border-radius: 40rpx;
					background-color: #ec5555;
					color: #fff;
				}
			}
		}
		.info-tab{
		  ::v-deep.tab-title{
			  text-align: center;
			  .title-text{
				  padding: 10px 60rpx;
			  }
		  }
		  ::v-deep.content{
			  text-align: left !important;
		  }
		  .info-content{
			  padding: 40rpx;
			  color: #807e80;
			  .detail-info-card{
				  box-sizing: border-box;
				  padding: 20rpx;
				  width: 100%;
				  background-color: #18191a;
				  border-radius: 20rpx;
				  .title{
					  margin: 10rpx 0;
					  color: #fff;
					  font-weight: 700;
				  }
				  .lable{
					  padding: 10rpx 0;
					  color: #807e80;
					  text{
						  padding-left: 10rpx;
						  color: #ccc;
					  }
					  .desc{
						  font-size: 26rpx;
					  }
				  }
			  }
			  .main-list{
			  	// margin-top: 100rpx;
			  	.content{
			  		box-sizing: border-box;
			  		position: relative;
			  		padding:60rpx 20rpx 0rpx;
			  		margin-top: -40rpx;
			  		opacity: .5;
			  		.tips{
			  			font-size: 22rpx;
			  			color: #ccc;
			  		}
			  		.list{
			  			background-color: unset;
			  			background-color: red;
			  			overflow: hidden;
			  			::v-deep.uni-list-item{
			  				background-color: unset !important;
			  				.uni-list-item__content-title{
			  					color: #fff;
			  				}
			  				.has-mv{
			  					margin-right: 40rpx;
			  					line-height: 76rpx;
			  					color: red;
			  				}
			  				.detail{
			  					line-height: 76rpx;
			  				}
			  			}
			  			::v-deep.uni-list--border-top,::v-deep.uni-list--border-bottom{
			  				height: 0;
			  			}
			  		}
			  	}
			  	.all-btn{
			  		height: 100rpx;
			  		line-height: 100rpx;
			  		width: 100%;
			  		text-align: center;
			  		color: #fff;
			  	}
			  }
			  .albums-list{
				.albums-item{
					margin: 20rpx 0;
					display: flex;
					background-color: #18191a;
					border-radius: 20rpx;
					overflow: hidden;
					image{
						width: 200rpx;
						height: 200rpx;
					}
					.right-info{
						padding: 0 20rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						.name{
							color: #fff;
							font-size: 32rpx;
						}
						.time{
							font-size: 24rpx;
						}
					}
				} 
			  }
		  }
		}
	}
	::v-deep.player-container{
		bottom: 0!important;
	}
}
</style>
